<template>
  <el-dialog
    v-model="model"
    width="600"
    top="10vh"
    title="加入到个人笔记"
    draggable
  >
    <div style="display: flex; align-items: center; padding: 10px 0">
      <span style="font-size: 14px"> 选择文件夹：</span>
      <el-input style="flex: 1" v-model="movePath" disabled></el-input>
    </div>
    <div class="folder-wrapper" style="height: 300px; overflow-y: auto">
      <el-tree
        style="max-width: 600px"
        :data="folderData"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        highlight-current
        @node-click="handleAddToFolder"
        ref="moveRef"
      >
        <template #default="{ node, data }">
          <span
            class="custom-tree-nodex"
            style="display: flex; align-items: center"
          >
            <el-icon color="#f8b83f" size="24"><FolderOpened /></el-icon>
            <span>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="model = false">取消</el-button>
        <el-button type="primary" @click="confirmMoveFolder"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue'
import { addLabel, addIdsToParent } from '@/utils/tools.ts'

import { enumFile } from '@/enum/note'
import { httpGetFolderList } from '@/api/note.js'
const noteData = ref([
  {
    id: 0,
    pid: null,
    label: '全部笔记',
    icon: 'Notebook',
    level: 1,
    children: [],
    type: 1,
  },
])
const moveRef = ref()
const movePath = ref('')
const folderData = ref([])
const model = defineModel()
const targetFolderData = ref({})

const emits = defineEmits(['confirm'])
function handleToTree(data) {
  let arr = []
  data.forEach((item) => {
    if (item.children) {
      item.children = handleToTree(item.children)
      arr.push(item)
    } else {
      item.type == enumFile.folder && arr.push(item)
    }
  })
  return arr
}
// 获取所有文件夹列表
const getFolderListData = async () => {
  const res = await httpGetFolderList()
  const { list } = res
  if (list.length) {
    noteData.value = list
    noteData.value.forEach((node) => {
      addIdsToParent(node)
    })
    noteData.value && (noteData.value[0].label = '全部笔记')
  }
}
watch(
  () => [model.value],
  async () => {
    if (model.value) {
      await getFolderListData()
      folderData.value = handleToTree(
        JSON.parse(JSON.stringify(noteData.value)),
      )
      addLabel(folderData.value)
      nextTick(() => {
        moveRef.value && moveRef.value.setCurrentKey(noteData.value[0].id)
        movePath.value = noteData.value[0].label
        targetFolderData.value = noteData.value[0]
      })
    }
  },
  {
    deep: true,
    immediate: true,
  },
)

const handleAddToFolder = (data) => {
  targetFolderData.value = data
  movePath.value = data.path
}
const confirmMoveFolder = async () => {
  emits('confirm', targetFolderData.value)
}
</script>
